<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style type="text/css">
        body {
            text-align: center;
            padding-top: 20px;
        }
        canvas {
            box-shadow: 0 0 10px #333;
            margin: 0 auto;
        }
    </style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600">
    你的浏览器太 low 了，请更新~!
</canvas>

<script>
    function draw() {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');

            /**
             * 线性渐变
             * 起点x1 起点y1 终点x1 终点y1
             */
            var lingrad = ctx.createLinearGradient(0, 0, 0, 150);

            /**
             * 颜色
             * 参数1：必须是 0.0~1.0 之间的数值，数值表示颜色所在的相对位置
             * 参数2：颜色，white #FFF #FFFFFF rgb(255,255,255) rgba(255,255,255,0)
             */
            lingrad.addColorStop(0, '#CC6677');
            lingrad.addColorStop(0.5, '#FFF');
            lingrad.addColorStop(0.5, '#C7C776');
            lingrad.addColorStop(1, '#FFF');

            var lingrad2 = ctx.createLinearGradient(0, 50, 0, 90);
            lingrad2.addColorStop(0.5, '#000');
            lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');

            ctx.fillStyle = lingrad;
            ctx.fillRect(10, 10, 130, 130);

            ctx.strokeStyle = lingrad2;
            ctx.strokeRect(50, 50, 50, 50);
        }
    }
</script>
</body>
</html>
